import React from 'react'

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Ionicons from 'react-native-vector-icons/Ionicons'

import HomeStack from './HomeStack'
import NewsStack from './NewsStack'
import UserStack from './UserStack'

const Tab = createBottomTabNavigator()

function Routes(): React.JSX.Element {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          console.log(route.name)

          let iconName: string = ''
          if (route.name === 'Home') {
            iconName = focused ? 'add-circle' : 'add-circle-outline'
          } else if (route.name === 'News') {
            iconName = focused ? 'newspaper' : 'newspaper-outline'
          } else if (route.name === 'User') {
            iconName = focused ? 'person' : 'person-outline'
          }
          return <Ionicons name={iconName} color={color} size={size} />
        },
        // tabBarStyle: { backgroundColor: 'white' },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="News" component={NewsStack} />
      <Tab.Screen name="User" component={UserStack} />
    </Tab.Navigator>
  )
}

export default Routes
